<template>
  <div class="role-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-table :data="tableData" border style="width: 100%" stripe>
        <el-table-column width="80" type=index label="#">
        </el-table-column>
        <el-table-column prop="role_name" label="角色" width="180">
        </el-table-column>
        <el-table-column prop="role_explain" label="说明">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'RoleCom',
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    async roleInit() {
      const { data: rel } = await this.$http.get('role')
      if (rel.code === 20000) {
        this.tableData = rel.data
      }
    }
  },
  created() {
    this.roleInit()
  }
}
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}
</style>
